<template>
	<van-nav-bar
		title="商品详情"
		left-text=""
		left-arrow
		@click-left="goBack"
		@click-right="showShare = true"
	>
		<template #right>
			<van-icon name="ellipsis" size="18" />
		</template>
	</van-nav-bar>
	<!-- 分享面板 -->
	<van-share-sheet
		v-model:show="showShare"
		title="立即分享给好友"
		:options="options"
	/>
	<div class="clear"></div>
	<div class="aui-m-slider">
		<van-swipe
			:autoplay="3000"
			lazy-render
			style="text-align: center; max-height: 325px"
		>
			<van-swipe-item v-for="item in info.thumbs_list" :key="item">
				<img :src="item" />
			</van-swipe-item>
		</van-swipe>
	</div>
	<div class="clear"></div>
	<div class="detailbox">
		<h4>{{ info.name }}</h4>
		<div class="price">
			<em>￥</em>{{ info.price }}
			<p>库存{{ info.stock }}件</p>
		</div>
	</div>
	<div class="clear"></div>
	<div class="allkbox"></div>
	<div class="clear"></div>
	<div class="detailbox_2">
		<van-tabs v-model:active="active" type="card" color="#ee0a24">
			<van-tab title="产品参数">
				<p v-html="info.content"></p>
			</van-tab>
			<van-tab title="商品评价">
				<div class="mark">
					<div class="fit">
						<span class="fit_text">与描述相符</span>
						<span class="fit_num">{{ value }}</span>
					</div>
					<van-rate v-model="value" allow-half />
				</div>
				<div class="evaluate">
					<div
						class="evaluate_item"
						v-for="item in orderProInfo"
						:key="item.id"
					>
						<div class="avatar">
							<van-image
								round
								fill
								width="4rem"
								height="4rem"
								:src="item.busAvatar"
							/>
							<span class="userName">{{ item.busName }}</span>
						</div>
						<div class="count">
							<span class="evaluate_text">{{ item.comment }}</span>
							<span class="evaluate_imgs">
								<van-image
									width="50"
									height="50"
									v-for="(img, index) in item.proimg"
									:key="index"
									:src="img"
									@click="showImage(item.proimg)"
								/>
							</span>
							<span class="evaluate_time">{{ item.updatetime }}</span>
						</div>
					</div>
				</div>
			</van-tab>
		</van-tabs>
	</div>
	<div class="clear"></div>
	<div class="h54"></div>
	<!-- 底部 -->
	<van-action-bar>
		<van-action-bar-icon icon="chat-o" text="客服" @click="goCartPage1" />
		<van-action-bar-icon
			icon="cart-o"
			text="购物车"
			:badge="info.count"
			@click="goCartPage"
		/>
		<van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
		<van-action-bar-button type="danger" text="立即购买" @click="buy" />
	</van-action-bar>
</template>
<script setup>
	const showShare = ref(false);
	const route = useRoute();
	const router = useRouter();
	const proid = ref(route.query.proid ?? 0);
	const info = ref({});
	const orderProInfo = ref([]);
	const { cookies } = useCookies();
	const LoginUser = reactive(cookies.get("LoginUser") ?? { id: 0 });
	const active = ref(0);
	const value = ref(0);
	const options = [
		[
			{ name: "微信", icon: "wechat" },
			{ name: "朋友圈", icon: "wechat-moments" },
			{ name: "微博", icon: "weibo" },
			{ name: "QQ", icon: "qq" },
		],
		[
			{ name: "复制链接", icon: "link" },
			{ name: "分享海报", icon: "poster" },
			{ name: "二维码", icon: "qrcode" },
			{ name: "小程序码", icon: "weapp-qrcode" },
		],
	];

	onBeforeMount(() => {
		getProductInfo();
	});
	// 评价图片放大
	const showImage = (imgs) => {
		showImagePreview(imgs);
	};
	// 返回
	const goBack = () => {
		history.back();
	};
	// 获取商品数据
	const getProductInfo = async () => {
		let result = await Api.product.productInfo({
			proid: proid.value,
			busid: LoginUser.id,
		});
		if (result.code == 1) {
			info.value = result.data.info;
			orderProInfo.value = result.data.orderProInfo;
			let sum=orderProInfo.value.reduce(
				(accumulator, item) => (accumulator + item.rate),
				0
			);
			let count=orderProInfo.value.length
			if(count>0){
				value.value=sum/count;
			}
			
		}
	};
	// 添加购物车
	const addCart = async () => {
		if (LoginUser.id == 0) {
			showSuccessToast({
				message: "未登陆，请先登陆",
				onClose: function () {
					router.push("/business/login");
				},
			});
			return false;
		}
		let result = await Api.product.cartAdd({
			proid: proid.value,
			busid: LoginUser.id,
		});
		if (result.code == 1) {
			showConfirmDialog({
				title: "添加购物车成功",
				message: "是否跳转到购物车列表?",
			})
				.then(() => {
					goCartPage();
				})
				.catch(() => {});
			getProductInfo();
		} else {
			showFailToast(result.msg);
		}
	};
	// 跳转到购物车列表
	const goCartPage = () => {
		router.push("/product/cart");
	};
	// 跳转到人工智能
	const goCartPage1 = () => {
		router.push("/product/qingyunke");
	};

	// 立即购买
	const buy = async () => {
		if(LoginUser){
			router.push({
			path: "/product/confirm",
			query: {
				proid: proid.value,
				buychecked: true,
			},
		});
		}else{
			showSuccessToast({
				message: "请登录之后再购买",
				onClose: function () {
					router.push("/business/login");
				},
			});
		}
		
	};
</script>
<style scoped lang="scss">
	.van-share-sheet__options {
		justify-content: center;
	}
	.van-tabs__nav--card {
		margin: 0;
	}
	.price p {
		float: right;
		color: #b7b7bf;
		font-size: 12px;
		font-weight: normal;
		line-height: 30px;
	}
	.mark {
		width: 100%;
		display: flex;
		padding: 20px 0;
		.fit {
			display: flex;
			flex-direction: column;
			flex: 1.2;
			justify-content: center;
			align-items: center;
			border-right: 1px solid #f5f5f5;
			.fit_text {
				color: #969896;
				font-size: 13px;
			}
			.fit_num {
				color: #ff6601;
				font-size: 30px;
				font-weight: bold;
				padding: 10px 0;
			}
		}
		.van-rate {
			flex: 3;
			justify-content: center;
			align-items: center;
		}
	}
	.evaluate {
		.evaluate_item {
			display: flex;
			border-top: 1px solid #f5f5f5;
			.avatar {
				padding: 10px;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.userName {
					color: #6f6a5b;
					font-size: 16px;
				}
			}
			.count {
				padding: 10px 0;
				flex: 3;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.evaluate_text {
					color: #5f5e54;
					font-size: 13px;
				}
				.evaluate_imgs {
					display: flex;
					flex-wrap: wrap;
					.van-image {
						padding: 10px 5px;
					}
				}
				.evaluate_time {
					color: #969896;
					font-size: 13px;
					margin-top: 10px;
				}
			}
		}
	}
</style>